<!--
 * @FilePath     : /vision/src/components/Hot.vue
 * @Author       : 哒哒哒
 * @Date         : 2024-05-26 21:50:58
 * @Description  :  热销商品占比模块(饼图)
 * Copyright    : G AUTOMOBILE RESEARCH INSTITUTE CO.,LTD Copyright (c) 2024.
-->

<template>
<div class="com-page hot" :class="{'fullscreen': isFullScreen}">
        <div class="com-container">
            <div class="com-chart" ref="hot_ref"></div>
            <!-- 左右箭头 -->
            <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
            <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
            <!-- 右下角标题 -->
            <div class="subtitle" :style="comStyle">{{ subTitle }}</div>
            <!-- 右上角方法按钮   -->
            <FullSCreenIcon :isFullScreen="isFullScreen" @toggleFullScreen="changeFullScreen"></FullSCreenIcon>
        </div>
    </div>
  </template>
  
  <script>
  import { throttle } from '@/utils';
  import FullSCreenIcon from './FullScreenIcon/index.vue'
  import FullscreenMixin from './mixins/FullscreenMixin'
  import ThemeMixins from '@/mixins/ThemeMixins';
  import { getThemeValue } from '@/utils/theme_utils';
  export default {
    /* eslint-disable */
    name: 'Hot',
    mixins: [FullscreenMixin, ThemeMixins],
    components: {
        FullSCreenIcon
    },
    data() {
        return {
            chartName: 'Hot',
            // 图标实例
            chartInstance: null,
            // 服务器返回的所有数据
            allData: null,
            // 记录监听事件，用于取消事件
            throttledAdaptScreen: null,
            // 当前展示的饼图的下标
            currentIndex: 0,
            // 用于根据屏幕大小自适应
            fontSize: 0
        }
    },
    computed: {
        // 右下角标题的文字
        subTitle() {
            if (!this.allData) return ''
            return this.allData[this.currentIndex].name
        },
        // 公共的样式
        comStyle() {
            return {
                fontSize: this.fontSize + 'px',
                color: getThemeValue(this.theme).titleColor,
            }
        }
    },
    created() {
        this.$socket.registerCallback('hotData', this.getData)
    },
    mounted() {
        this.initChart();
        this.$socket.send({
            action: 'getData',
            socketType: 'hotData',
            chartName: 'hot',
            value: ''
        })
        this.adaptScreen();
        this.throttledAdaptScreen = throttle(this.adaptScreen, 100)
        window.addEventListener('resize', this.throttledAdaptScreen);
    },
    destroyed() {
        this.$socket.unRegisterCallback('hotData')
        window.removeEventListener('resize', this.throttledAdaptScreen)
    },
    methods: {
        // 点击向左以及向右按钮
        toLeft() {
            this.currentIndex = (this.currentIndex + this.allData.length - 1) % this.allData.length;
            this.updateChart()
        },
        toRight() {
            this.currentIndex = (this.currentIndex + 1) % this.allData.length;
            this.updateChart()
        },
        // 初始化表格
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.hot_ref, this.theme)
            const initOption = {
                title: {
                    text: '▎热销商品的占比',
                    left: 20,
                    top: 20
                },
                legend: {
                    top: '15%',
                    icon: 'circle'
                },
                tooltip: {
                    show: true,
                    formatter: arg => {
                        // arg.data就是传给series数组中data的每一项的数据
                        let str = ''
                        arg.data.children.forEach(item => {
                            let percent = Math.floor(item.value / arg.data.value * 100);
                            str+=item.name + ':' + percent + '%<br/>'
                        })
                        return str
                    }
                },
                series: [
                    {
                        type:'pie',
                        // 默认情况下不显示各个item的名称
                        label: {
                            show: false
                        },
                        // hover情况下,显示名称,但是不显示名称和图标的链接线
                        emphasis: {
                            label: {
                                show: true
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOption)
        },
        // 获取数据
        async getData(data) {
            // const {data} = await this.$http.get('hot')
            this.allData = data;
            // 渲染数据
            this.updateChart()
        },
        // 更新表格
        updateChart() {
            let legendArr = this.allData[this.currentIndex].children.map(item=>item.name);
            let seriesArr = this.allData[this.currentIndex].children.map(item=>({
                name: item.name,
                value: item.value,
                children: item.children
            }));
            const dataOption = {
                legend: {
                    data: legendArr
                },
                series: [
                    {
                        data: seriesArr
                    }
                ]
            }
            this.chartInstance.setOption(dataOption)
        },
        // 根据屏幕尺寸，将图标适配屏幕
        adaptScreen() {
            let chartWidth = this.$refs.hot_ref.offsetWidth;
            this.fontSize = (chartWidth / 100) * 3.6
            const adaptOption = {
                title: {
                    textStyle: {
                        fontSize: this.fontSize
                    },
                },
                legend: {
                    itemWidth: this.fontSize/1.3,
                    itemHeight: this.fontSize/1.3,
                    itemGap: this.fontSize/1.3,
                    textStyle: {
                        fontSize: this.fontSize/1.3
                    }
                },
                series: [
                    {   
                        // 设置饼图的大小
                        radius: this.fontSize * 4.5,
                        // 设置圆心的位置
                        center: ['50%', '60%']
                    }
                ]
            }
            this.chartInstance.setOption(adaptOption)
            this.chartInstance.resize();
        }
    }
  }
  </script>
  
  <style scoped lang='less'>
  .hot {
    .arr-left {
        position: absolute;
        left: 10%;
        top: 50%;
        color: white;
        cursor: pointer;
        user-select: none;
        transform: translateY(-50%);
    }
    .arr-right {
        position: absolute;
        right: 10%;
        top: 50%;
        color: white;
        cursor: pointer;
        user-select: none;
        transform: translateY(-50%);
    }
    .subtitle {
        position: absolute;
        right: 15%;
        bottom: 10%;
        color: white;
    }
    .icon-compress-alt,
    .icon-expand-alt {
        color: white;
        cursor: pointer;
        position: absolute;
        top: 20px;
        right: 20px;
    }
  }
  </style>
  